<template>
	<view>
		<view class="input-wraper">
			<view style="display: flex; line-height:30px; bottom: 55px;z-index: 9999; position: absolute; width: 100%;">
				<view style="padding: 3px 6px; height: 20px; line-height: 20px; font-size: 10px; color: #333; background-color: #e6e6e6; border-radius: 5px;" @click="leftHistoryClick">
					历史会话
				</view>
				<view style="margin-left:5px;padding: 3px 6px; height: 20px; line-height: 20px; font-size: 10px; color: #333; background-color: #e6e6e6; border-radius: 5px;" @click="OpenNewChat">
					新建会话
				</view>
			</view>
		 
 
			<view v-if="inputType=='keyboard'">
				<u-input border="0" :focus="focus" placeholder="有什么问题尽管问我" v-model="message" >
					<template slot="prefix">
						<view style="padding: 5px 5px;" @click="handleActionClick('mic')">
							<u-icon name="mic" size="25" v-if="inputType=='keyboard'"></u-icon>
							<u-icon v-if="inputType=='mic'" custom-prefix="custom-icon-keyboard custom-icon" size="20"
								color="#888"></u-icon>
						</view>
					</template>
					<template slot="suffix">
						<view style="display: flex;">
							<view style="padding: 5px 5px; " @click="handleActionClick('plus')">
								<u-icon name="plus-circle" size="25"></u-icon>
							</view>
							<view style="padding: 5px 5px;" @click="handleActionClick('send')">
								<u-icon custom-prefix="custom-icon-send custom-icon" size="25" :color="message==''? '#d6d6d6':'#000000'" ></u-icon>
							</view>
						</view>
					</template>
				</u-input>
			</view>
			<!--语音输入模式-->
			<view v-if="inputType=='mic'" style="display: flex;" :class="isRecording? 'recording':''">
				<view style="padding: 11px 14px;" @click="handleActionClick('keyboard')" v-if="!isRecording">
					<u-icon v-if="inputType=='mic'" custom-prefix="custom-icon-keyboard custom-icon" size="25"
						color="#333"></u-icon>
				</view>
				<view style="flex: 1; color: #666;" @touchstart="startRecord" @touchend="stopRecord" @longpress="handleLongPress">
					<text>按住 说话</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "chatInput",
		data() {
			return {
				isRecording:false,
				focus: true,
				inputType: 'keyboard',
				message:'',
			};
		},
		methods: {
			OpenNewChat(){
				uni.navigateTo({
					url:'/pages/chat/index?type=new&q='
				})
			},
			handleActionClick(type) {
				switch (type) {
					case "mic":
					case "keyboard":
						this.inputType = (this.inputType == 'keyboard' ? 'mic' : 'keyboard');
						this.focus = this.inputType == 'keyboard' ? true : false;
						break;

					case "send":
						this.$emit("send",this.message);
						this.message="";
						break;
				}

			},
			leftHistoryClick(){
				this.$emit("openHistory");
			},
			handleLongPress(){
				console.log('按钮被按住');
			},
			startRecord(){
 				console.log("开始录音")
				this.isRecording=true;
				uni.getRecorderManager()
				uni.startRecord({
					success:(res)=>{
						console.log("录音文件路径",res.tempFilePath);
					},	
					fail:(err)=>{
						 console.log("录音失败",err);
					}
				})
			},
			stopRecord(){
				console.log("停止录音")
				this.isRecording=false;
				uni.stopRecord();
				
			},
			handleSendClick() {

			}
		}
	}
</script>

<style>
	.input-wraper {
		position: absolute;
		bottom: 0px;
		left: 0px;
		right: 0px;
		height: 50px;
		line-height: 50px;
		margin: 5px 10px 10px 10px;
		border-radius: 12px;
		background-color: #efefef;
	}
	.recording{
		background-color: yellowgreen;
	}
</style>